<template>
  <div class="job-list-container">
    <div class="header">
      <h2>职位列表</h2>
    </div>
    
    <div class="search-filters">
      <div class="search-box">
        <input 
          type="text" 
          v-model="searchKeyword" 
          placeholder="搜索职位标题、公司或地点..." 
          @input="handleSearch"
        />
        <button @click="handleSearch" class="search-btn">搜索</button>
      </div>
      
      <div class="filters">
        <select v-model="locationFilter" @change="handleFilter">
          <option value="">所有地点</option>
          <option value="北京">北京</option>
          <option value="上海">上海</option>
          <option value="广州">广州</option>
          <option value="深圳">深圳</option>
          <option value="杭州">杭州</option>
        </select>
      </div>
    </div>
    
    <div v-if="loading" class="loading">
      加载中...
    </div>
    
    <div v-else-if="filteredJobs.length === 0" class="empty-state">
      <p>没有找到相关职位。</p>
    </div>
    
    <div v-else class="jobs-list">
      <div v-for="job in filteredJobs" :key="job.id" class="job-card">
        <div class="job-header">
          <h3>{{ job.title }}</h3>
        </div>
        
        <div class="job-details">
          <p><strong>公司:</strong> {{ job.company }}</p>
          <p><strong>地点:</strong> {{ job.location }}</p>
          <p><strong>薪资:</strong> {{ job.salary || '面议' }}</p>
          <p><strong>发布时间:</strong> {{ formatDate(job.createdAt) }}</p>
          <p v-if="isApplicantComputed"><strong>申请状态:</strong> {{ getApplicationStatus(job.id) }}</p>
        </div>
        
        <div class="job-description">
          <p>{{ truncateDescription(job.description) }}</p>
        </div>
        
        <div class="job-actions">
          <router-link :to="`/jobs/${job.id}`" class="view-details-btn">查看详情</router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue';
import { getAllJobs, searchJobs, filterJobs } from '../services/jobService';
import { getApplicationsByApplicant } from '../services/applicationService';
import { getCurrentUser, isApplicant } from '../services/authService';

// 数据
const jobs = ref([]);
const loading = ref(true);
const searchKeyword = ref('');
const locationFilter = ref('');

// 过滤后的职位
const filteredJobs = computed(() => {
  let result = jobs.value;
  
  // 应用搜索关键词
  if (searchKeyword.value) {
    const lowerKeyword = searchKeyword.value.toLowerCase();
    result = result.filter(job => 
      job.title.toLowerCase().includes(lowerKeyword) ||
      job.company.toLowerCase().includes(lowerKeyword) ||
      job.location.toLowerCase().includes(lowerKeyword) ||
      job.description.toLowerCase().includes(lowerKeyword)
    );
  }
  
  // 应用地点筛选
  if (locationFilter.value) {
    result = result.filter(job => 
      job.location === locationFilter.value
    );
  }
  
  return result;
});

// 加载职位数据
const loadJobs = () => {
  try {
    jobs.value = getAllJobs();
  } catch (err) {
    console.error('加载职位失败:', err);
  } finally {
    loading.value = false;
  }
};

// 格式化日期
const formatDate = (dateString) => {
  const date = new Date(dateString);
  return date.toLocaleDateString('zh-CN');
};

// 截断职位描述
const truncateDescription = (description) => {
  if (description.length > 100) {
    return description.substring(0, 100) + '...';
  }
  return description;
};

// 获取申请状态
const getApplicationStatus = (jobId) => {
  if (!isApplicant()) return '';
  
  try {
    const currentUser = getCurrentUser();
    const applications = getApplicationsByApplicant(currentUser.id);
    const application = applications.find(app => app.jobId === jobId);
    
    if (!application) return '未申请';
    
    const statusMap = {
      'pending': '已申请(待处理)',
      'accepted': '已接受',
      'rejected': '已拒绝'
    };
    
    return statusMap[application.status] || application.status;
  } catch (err) {
    return '未知状态';
  }
};

// 处理搜索
const handleSearch = () => {
  // 搜索逻辑已经在computed中处理
};

// 处理筛选
const handleFilter = () => {
  // 筛选逻辑已经在computed中处理
};

// 组件挂载时加载数据
onMounted(() => {
  loadJobs();
});
</script>

<style scoped>
.job-list-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.header {
  margin-bottom: 2rem;
}

.header h2 {
  margin: 0;
  color: #2c3e50;
}

.search-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 2rem;
  align-items: center;
}

.search-box {
  display: flex;
  flex: 1;
  min-width: 300px;
}

.search-box input {
  flex: 1;
  padding: 0.75rem;
  border: 1px solid #ddd;
  border-radius: 4px 0 0 4px;
  font-size: 1rem;
  box-sizing: border-box;
}

.search-box input:focus {
  outline: none;
  border-color: #3498db;
  box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
}

.search-btn {
  padding: 0.75rem 1rem;
  background-color: #3498db;
  color: white;
  border: none;
  border-radius: 0 4px 4px 0;
  cursor: pointer;
  transition: background-color 0.3s;
}

.search-btn:hover {
  background-color: #2980b9;
}

.filters select {
  padding: 0.75rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 1rem;
  background-color: white;
}

.filters select:focus {
  outline: none;
  border-color: #3498db;
  box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
}

.loading {
  text-align: center;
  padding: 2rem;
  font-size: 1.2rem;
  color: #7f8c8d;
}

.empty-state {
  text-align: center;
  padding: 2rem;
}

.empty-state p {
  font-size: 1.2rem;
  color: #7f8c8d;
  margin-bottom: 1rem;
}

.jobs-list {
  display: grid;
  gap: 1.5rem;
}

.job-card {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  padding: 1.5rem;
}

.job-header {
  margin-bottom: 1rem;
}

.job-header h3 {
  margin: 0;
  color: #2c3e50;
}

.job-details {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.job-details p {
  margin: 0;
  color: #34495e;
}

.job-description p {
  margin: 0 0 1rem 0;
  color: #34495e;
  line-height: 1.5;
}

.job-actions {
  text-align: right;
}

.view-details-btn {
  padding: 0.5rem 1rem;
  background-color: #3498db;
  color: white;
  text-decoration: none;
  border-radius: 4px;
  transition: background-color 0.3s;
}

.view-details-btn:hover {
  background-color: #2980b9;
}

@media (max-width: 768px) {
  .search-filters {
    flex-direction: column;
    align-items: stretch;
  }
  
  .search-box {
    min-width: auto;
  }
  
  .job-details {
    grid-template-columns: 1fr;
  }
}
</style>